/**
 *
 */

export default function store_ondrop(state, { e, that }) {
  let pathList;
  let tree;
  let dataType; // 目标组件类型
  let boxType; // 目标容器类型
  let haveClassName; // 判断有无唯一class名
  let path = []; // 用于栈的路径记录
  let oldDom; // 记录组件移动前数据

  // 判断aimDom是否为空
  if (Object.keys(state.aimDom).length == 0) return;

  pathList = e.path.slice(0, -6).reverse();
  // tree = state.page.tree[that.pageName];
  dataType = state.aimDom.attrs["data-type"];
  boxType = e.target.getAttribute("data-type");
  haveClassName = state.aimDom.attrs.class.match(
    new RegExp(dataType + "[0-9]{13}")
  );

  // 相对容器的位置变化
  if (["button", "text", "img", "freeBox"].includes(dataType)) {
    oldDom = JSON.parse(JSON.stringify(state.aimDom));
    // freeBox是放在根组件下面的
    if (["freeBox"].includes(dataType)) {
      // 鼠标位置 - 鼠标与父组件位置差
      that.$set(state.aimDom.style, "top", e.pageY - state.aimXY[1] + "px");
      that.$set(state.aimDom.style, "left", e.pageX - state.aimXY[0] + "px");
    } else {
      // 鼠标位置 - 父组件位置 - 鼠标与父组件位置差
      that.$set(
        state.aimDom.style,
        "top",
        e.pageY - pathList[0].offsetTop - state.aimXY[1] + "px"
      );
      that.$set(
        state.aimDom.style,
        "left",
        e.pageX - pathList[0].offsetLeft - state.aimXY[0] + "px"
      );
      // 用于遮蔽层显示时加上父组件的位置
      state.aimDom.faPosition = {
        top: pathList[0].offsetTop,
        left: pathList[0].offsetLeft,
      };
    }
  }

  //容器不标准--视作组件移动
  if (
    !["fixedBox", "freeBox", "colBoxItem", "seniorBoxItem"].includes(boxType) &&
    e.path[0].className != "app"
  ) {
    // 是旧组件
    if (haveClassName) {
      state.domStackNum += 1;
      state.domStack.splice(state.domStackNum); //将后面的操作删除
      state.domStack.push({
        type: "attrsChange",
        pageName: that.pageName,
        path: state.aimPath,
        data: [oldDom, JSON.parse(JSON.stringify(state.aimDom))],
      });
    }
    return;
  }

  //判断组件类型
  if (
    !["fixedBox", "freeBox", "colBox", "seniorBox", "navMenu"].includes(
      dataType
    )
  ) {
    // 如果不是放在根组件下面的，要寻找父组件
    tree = that.$searchDom(state.page.tree[that.pageName], pathList, false);
  } else {
    // 根组件下面的
    tree = state.page.tree[that.pageName];
  }

  //栈的路径记录
  //dom路径解析
  pathList.forEach((element) => {
    if (element.className.includes("boxLine")) {
      path.push({
        className: element.className.replace(" boxLine", ""),
      });
    } else {
      path.push({
        className: element.className,
      });
    }
  });

  // 记得加上目标组件的className
  path.push({
    className: state.aimDom.attrs.class,
  });

  //判断有无唯一class名
  if (!haveClassName) {
    //设置唯一class名--新组件
    if (state.aimDom.attrs.class == "") {
      state.aimDom.attrs.class = `${dataType}${new Date().getTime()}`;
    } else {
      state.aimDom.attrs.class = `${
        state.aimDom.attrs.class
      } ${dataType}${new Date().getTime()}`;
    }

    if (
      ["fixedBox", "freeBox", "colBox", "seniorBox", "navMenu"].includes(
        dataType
      )
    ) {
      //要通过对话框
      if (["colBox", "seniorBox"].includes(dataType)) {
        that[`${dataType}Dialog`] = true;
      } else {
        //添加容器
        tree.push(state.aimDom);
        state.domStackNum += 1;
        state.domStack.splice(state.domStackNum);
        state.domStack.push({
          type: "add",
          pageName: that.pageName,
          data: [JSON.parse(JSON.stringify(state.aimDom)), tree.length],
          path: [
            {
              className: state.aimDom.attrs.class,
            },
          ],
        });
      }
    } else {
      //添加通用组件
      // 这样子轮播图不会布满容器
      if (["carousel"].includes(dataType)) {
        state.aimDom.attrs.height =
          parseInt(e.target.offsetHeight) * 0.8 + "px";
      }

      tree.children.push(state.aimDom);
      path[path.length - 1].className = state.aimDom.attrs.class;
      state.domStackNum += 1;
      state.domStack.splice(state.domStackNum);
      state.domStack.push({
        type: "add",
        pageName: that.pageName,
        data: [JSON.parse(JSON.stringify(state.aimDom))],
        path,
      });
    }
  } else {
    //已有通用组件--组件移动
    // 普通组件
    if (!["freeBox"].includes(dataType)) {
      that.$searchDom(state.page.tree[that.pageName], state.aimPath, true); //删除原来的通用组件
      tree.children.push(state.aimDom);
      state.domStackNum += 1;
      state.domStack.splice(state.domStackNum);
      state.domStack.push({
        type: "moveBox",
        pageName: that.pageName,
        path: [state.aimPath, path],
        data: [oldDom, JSON.parse(JSON.stringify(state.aimDom))],
      });
    } else {
      // freeBox
      state.domStackNum += 1;
      state.domStack.splice(state.domStackNum);
      state.domStack.push({
        type: "attrsChange",
        pageName: that.pageName,
        path: [
          {
            className: state.aimDom.attrs.class,
          },
        ],
        data: [oldDom, JSON.parse(JSON.stringify(state.aimDom))],
      });
    }
  }

  state.aimDom = {};
  state.aimAttrs = {};
  e.preventDefault();
}
